<template>
  <view class="content">
    <!-- 1.搜索栏 -->
    <yg-search></yg-search>
    <!-- 2.轮播图 -->
    <view class="swiper">
      <!-- 1 轮播图高度和图片高度的设置
		1 轮播图的高度一致和图片高度一样  
		原图的宽 /  原图的高 =  屏幕改变后的图片的宽 /  屏幕改变后的图片的高
		750 / 340 = 屏幕改变后的图片的宽 (100vw 750rpx)
		750 / 340 = 屏幕改变后的图片的宽  750rpx / 340rpx -->
      <u-swiper :list="swiperList" height="340"></u-swiper>
    </view>

    <!-- 3.导航栏 -->
    <view class="navigationBar">
      <navigator
        class="nav_item"
        v-for="item in catitemsList"
        :key="item.image_src"
      >
        <image :src="item.image_src" mode="widthFix"></image>
      </navigator>
    </view>

    <!-- 4.楼层 -->
    <view class="floor">
      <view class="floor_item" v-for="(item, index) in floorList" :key="index">
        <!-- 标题 -->
        <view class="floor_item_title">
          <image :src="item.floor_title.image_src" mode="widthFix"></image>
        </view>
        <!-- 内容 -->
        <view class="floor_content">
          <navigator
            class="floor_content_item"
            v-for="item2 in item.product_list"
            :key="item2.image_src"
          >
            <image :src="item2.image_src"></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ygSearch from '../../components/ygSearch/ygSearch.vue';
export default {
  components: { ygSearch },
  data() {
    return {
      //轮播数组
      swiperList: [],
      //导航数组
      catitemsList: [],
      //楼层数组
      floorList: [],
    };
  },
  onLoad() {
    // this.$u.api.getSwiper().then((res) => {
    //   console.log(res);
    // });
    //发送异步请求
    // this.$u.get('/home/swiperdata').then(res => {
    // 	console.log(res);
    //   const swiperList = res.message.map((v) => ({ ...v, image: v.image_src }));
    //   this.swiperList = swiperList;
    // });
    // return;

    // uni
    //   .request({
    //     url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
    //   })
    //   .then((res) => {
    //     // console.log(res)
    //     const message = res[1].data.message;
    //     // console.log(message)
    //     // 动态给message中的元素添加一个属性名 image 图片的路径
    //     const swiperList = message.map((v) => ({ ...v, image: v.image_src }));
    //     // 直接在 message 的基础上新增属性
    //     // message.forEach(v=>v.image=v.image_src);
    //     this.swiperList = swiperList;
    //   });

    //获取轮播图
    this.getSwiper();
    //获取导航栏菜单
    this.getCatitems();
    //获取楼层
    this.getFloor();
  },
  methods: {
    //获取轮播图请求
    async getSwiper() {
      const { message } = await this.$u.api.getSwiper();
      // console.log(message)
      const swiperList = message.map((value) => ({
        ...value,
        image: value.image_src,
      }));
      this.swiperList = swiperList;
    },
    //获取导航栏请求
    async getCatitems() {
      const { message } = await this.$u.api.getCatitems();
      // console.log(message)
      this.catitemsList = message;
    },
    //获取楼层请求
    async getFloor() {
      const { message } = await this.$u.api.getFloor();
      // console.log(message)
      this.floorList = message;
    },
  },
};
</script>

<style lang="scss">
//导航栏
.navigationBar {
  display: flex;
  .nav_item {
    flex: 1;
    padding: 20rpx;
  }
}
//楼层
.floor {
  .floor_item {
    .floor_item_title {
      margin: 10rpx 0;
    }
    .floor_content {
      overflow: hidden;
      .floor_content_item {
        float: left;
        image {
          width: 250rpx;
          height: 207.97413793103448rpx;
        }
      }
      .floor_content_item:nth-child(1) {
        image {
          height: 415.94827586206895rpx;
        }
      }
      .floor_content_item:nth-last-child(-n + 4) {
        image {
          border-left: 4rpx solid #fff;
        }
      }
      .floor_content_item:nth-last-child(-n + 2) {
        image {
          border-top: 4rpx solid #fff;
        }
      }
    }
  }
}
</style>
